jQuery中的选择器

选择器

jQuery简称js库,是为了简化JavaScript的开发或是DOM的操作等.
jQuery选择器的作用是用于定位页面元素
特点:
1. 就是做得多,写的少
2. 兼容各种浏览器

工厂函数

jQuery的工厂函数是作为jQuery的一入口,通过该函数可以实现定位页面元素,将DOM对象包装成jQuery对象,以及创建页面元素等功能.
jQuery的工厂函数有两种写法:
1. $()
2. jQuery()
说明: "$" 符号与 "jQuery" 单词的含义是一致的
jQuery的约定:
- 在变量前加 $ 以表示jQuery操作

示例代码:

<!-- 引入jQuery文件 -->
<script src="js/jquery.js"></script>
<body>
<button id="btn">按钮</button>
<script>
    // DOM操作 (返回DOM对象) - 获取页面中的按钮元素
    var btn = document.getElementById('btn');
    console.log(btn);

    /*
        jQuery操作 - 获取页面中的按钮元素
        jQuery() - 称为jQuery的工厂函数
          * 作用 - 该函数是jQuery操作的一个入口
            * 用于定位页面中的元素
          * 用法 - 另一种用法是"$()"
          * 返回值 - jQuery对象
     */

    var btn = jQuery('#btn');
    var btn = $('#btn');
    console.log(btn);

</script>
</body>

DOM对象与jQuery对象

所谓DOM对象,就是指由DOM的官方规范提供的对象,或者是通过DOM提供的对象属性或方法定位HTML页面元素得到的对象.
DOM对象转换为jQuery对象

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">克鲁达</button>
<script>
    // DOM操作(返回DOM对象
    var btn = document.getElementById('btn');
    // 1. 将DOM对象转换为jQuery对象 - 就是工厂函数
    var $btn = $(btn);
    console.log($btn);
    // 2. 将jQuery对象转换为DOM对象:
    // jQuery对象是一个类数组对象 - 转换方法就是: jQuery对象[索引值]
    var btn1 = $btn[0];
    console.log(btn1);

    // jQuery对象提供了get(index)方法 - index表示索引值
    var btn2 = $btn.get(0);
    console.log(btn2);

</script>
</body>

基本选择器

注意 - 所有选择器都是字符串类型
注意 - 通配符选择器是匹配所有的
ID 选择器: 就是通过HTML页面的元素的id属性值定位页面元素
元素选择器: 就是通过HTML页面的元素名称定位页面元素
类选择器: 就是通过HTML页面元素的class属性定位页面元素
通配符选择器: 就是匹配HTML页面中所有的元素
组合选择器: 就是将每个选择器匹配的元素的集合
说明: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象.
备注: 在jquery中使用选择器的时候是没有优先级别的

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<div id="d1">一花一世界</div>
<div id="d2" class="yy">一笑一人生</div>
<script>
    // ID属性选择器 - 匹配指定ID属性值的元素
    console.log($('#d1'));
    // 类选择器 - 匹配所有指定类名的元素
    console.log($('.yy'));
    // 元素选择器 - 匹配所有指定元素木那个的元素
    console.log($('div'));
    // 通配符选择器 - 匹配页面中所有的元素
    console.log($('*'));
    // 组合选择器 - 多个选择器之间使用逗号分隔(并集) - 并集就是符合一个就好使
    console.log($('#d1','.yy'));
    // 组合选择器 - 多个选择器之间没有任何分隔(交集) - 交集就是必须全部符合才好使
    console.log($('#d2.yy'));
</script>
</body>

层级选择器

后代选择器 - 匹配指定祖先元素中的后代元素
子选择器 - 匹配指定父元素中的子元素
相邻兄弟选择器 - 匹配指定元素的下一个兄弟元素
普通兄弟选择器 - 匹配指定元素的下面所有兄弟元素

示例代码:

    <title>层级选择器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
    <div id="child">
        <div id="d6"></div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d4"></div>
        <div id="d5"></div>
    </div>
    <div id="child2">
        <div id="d3"></div>
    </div>
</div>
<script>
    // 查找指定父元素所有的后代div
    console.log($('#parent div'));
    // 查找指定父元素的所有子级元素
    console.log($('#parent>div'));
    // 查找指定元素的下一个兄弟元素
    console.log($('#d1+div'));
    // 查找指定元素的后面所有兄弟元素(不包括前面的)
    console.log($('#d1~div'));
    // siblings()方法 - 获取指定元素所有的兄弟元素(包括前面的)
    console.log($('#d1').siblings('div'));
</script>
</body>

基本过滤选择器

就是把不要的过滤掉要的留下
在指定范围匹配的元素当中进行筛选(本身自己没有层级结构)

示例代码:

    <title>基本过滤选择器</title>
    <script src="js/jquery.js"></script>
    <style>
        #animated{
            width: 100px;
            height: 200px;
            background-color: cyan;

            position: absolute;
            left: 100px;
        }
    </style>
</head>
<body>
<h1>八百标兵奔北坡</h1>
<h2>炮兵并排北边跑</h2>
<div>一花一世界</div>
<div id="d2">
    <div id="child"></div>
</div>
<div></div>
<div></div>
<div>一笑一人生</div>

<div id="animated"></div>

<script>
    // 在指定范围内筛选出第一个元素
    console.log($('div:first'));
    // 在指定范围内筛选出最后一个元素
    console.log($('div:last'));

    /*
        注意 :
          * 索引值为偶数时实际上是奇数
          * 索引值为奇数时实际上是偶数
          * 因为索引值是从 0 开始的
     */
    // 在指定范围内筛选出索引值为偶数的元素
    console.log($('div:even'));
    // 在指定范围内筛选出索引值为奇数的元素
    console.log($('div:odd'));

    /*
        :eq(index) - index表示索引值
     */
    // 筛选出等于指定索引值的元素
    console.log($('div:eq(0)'));
    // 筛选出大于指定索引值的元素
    console.log($('div:gt(3)'));
    // 筛选出小于于指定索引值的元素
    console.log($('div:lt(2)'));

    // :header - 表示匹配h1~h6的元素
    console.log($(':header'));

    function animated() {
        /*
            slideToggle - 是jQuery提供的动画效果
         */
        $('#animated').slideToggle(animated);
    }
    animated();

    // :animated - 表示只能匹配由jQuery实现的动画
    console.log($(':animated'));

    // 筛选出除属性值为child以外的所有元素
    console.log($('div:not("#child")'));
</script>
</body>

内容过滤选择器

示例代码:

    <title>内容过滤选择器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div>我是有内容的</div>
<div></div>
<div>
    <div id="child"></div>
</div>
<script>
    // 匹配到包含指定文本内容的元素
    console.log($('div:contains("内容")'));
    // 匹配到没有文本内容的元素和没有后代元素的元素
    console.log($('div:empty'));
    // 匹配到有文本内容的元素和有后代元素的元素
    console.log($('div:parent'));
    /*
        :has() - 表示包含匹配指定选择器元素的父级
        [0] - 表示数组的提取
     */
    console.log($('div:has("#child")')[0]);
</script>
</body>

可见性过滤选择器

:hidden选择器

就是匹配到所有不可见的元素
不能匹配到CSS样式属性visibility设置为hidden的隐藏元素
还能匹配到HTML页面中不做任何显示效果的元素
注意 - 用的时候尽量确定元素类型或指定范围
- 因为要是不指定范围的话它会筛选出页面中所有的隐藏元素(比如:<HTML>,<meta>以及<style>等等)

示例代码:

    <title>可见性过滤选择器</title>
    <script src="js/jquery.js"></script>
    <style>
        #d1 {
            display: none;
        }
        #d2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
    console.log($('hidden'));
</script>
</body>

:visible选择器

就是匹配到所有可见的元素
匹配CSS样式属性visibility设置为hidden的隐藏元素
- 当visibility设置为hidden时的元素,依旧占有页面空间
还能匹配HTML页面中<html>和<body>元素

示例代码:

    <title>可见性过滤选择器</title>
    <script src="js/jquery.js"></script>
    <style>
        #d1 {
            display: none;
        }
        #d2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
   console.log($(':visible'));
</script>
</body>

属性过滤选择器

就是通过元素的属性过滤掉不要的元素
通过属性以及属性的值来筛选

示例代码:

    <title>属性过滤选择器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
    // 获取到所有元素中所有带有指定属性的元素
    console.log($('div[name]'));
    // 获取到所有元素中带有指定属性和值的元素
    console.log($('div[class=mydiv]'));
    // 获取到所有不含有指定属性或不等于特定属性值的元素
    console.log($('div[class!=maydiv]'));
    // 获取到所有指定元素中以什么什么开头的元素
    console.log($('div[class^=my]'));
    // 属性过滤选择器组合用法 - 交集(交集就是必须全部符合才好使)
    console.log($('div[name=di][class^=my]'));
</script>
</body>

子元素过滤选择器

在指定的范围内进行子级选择器过滤
需要注意的是:
- nth-child(index)
  - 作用 - 匹配当前元素作为第几个子元素
  - index是从 1 开始的,表示第几个
    - 和索引值不同的是索引值是从 0 开始的

示例代码:

    <title>子元素过滤选择器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
    <div id="d1">我是第一个子元素...</div>
    <div id="d2">我是中间的子元素...</div>
    <div id="d3">我是最后一个子元素...
        <div id="child">我是id为d3的唯一的子元素...</div>
    </div>
</div>
<script>
    // :first-child - 表示当前匹配到的是第一个子元素
    console.log($('div:first-child'));
    // :last-child - 表示当前匹配到的是最后一个子元素
    console.log($('div:last-child'));
    /*
        nth-child(index)
          * 作用 - 匹配当前元素作为第几个子元素
          * index - 表示第几个
          * 注意 - index是从 1 开始的,表示第几个
            * 和索引值不同的是索引值是从 0 开始的
     */
    console.log($('div:nth-child(2)'));
    // only-child - 表示获取到某个父级元素中唯一一个子元素的元素
    console.log($('div:only-child'));

</script>
</body>

表单对象过滤选择器

示例代码:

    <title>表单对象过滤选择器</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">亚古兽
    <input type="checkbox" checked>加鲁鲁兽
    <select>
        <option>黑龙江</option>
        <!-- selected - 表示被选中的 -->
        <option selected>佳木斯</option>
        <option>哈尔滨</option>
    </select>
</form>
<script>
    // :disabled - 表示匹配到不可用的元素
    console.log($('input:disabled'));
    // :checked - 表示匹配到所有被选中的元素
    console.log($('input:checked'));
    // :selected - 表示匹配到选中的<option>元素
    console.log($('option:selected'))
</script>
</body>

jQuery中的选择器

选择器

工厂函数

DOM对象与jQuery对象

基本选择器

层级选择器

基本过滤选择器

内容过滤选择器

可见性过滤选择器

:hidden选择器

:visible选择器

属性过滤选择器

子元素过滤选择器

表单对象过滤选择器

a达达

引用和评论

Ajax系列之JSON数据格式

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版